import React from "react";
import { Input, Tabs } from "antd";
import Pannel from "./Pannel";
import FlowVariablesSelectorPopover from "./FlowVariablesSelector";
import styles from "./Pannel.less";

const { TabPane } = Tabs;
class EdgeSelected extends Pannel {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: "1",
      label: "",
      // description: "",
      conditionsequenceflow: "",
    };
  }

  renderInput() {
    const { label: inputingLabel } = this.state;
    const { selectedModel = {}, disable } = this.props;
    const labelValue =
      inputingLabel === "empty" ? "" : inputingLabel || selectedModel.label;

    return (
      <div className={styles.content_item}>
        <span className={styles.item_label}>名称：</span>
        <Input
          placeholder="请输入名称"
          disabled={disable}
          maxLength={20}
          value={labelValue}
          onChange={(ev) => this.handleChage("label", ev.target.value)}
          onBlur={(ev) => {
            this.handleGraphChange("label", ev.target.value);
          }}
        />
      </div>
    );
  }

  render() {
    const { conditionsequenceflow, activeKey /* , description: inputingDescription */ } = this.state;
    const { selectedModel = {}, disable, modelProperties: { modelVariables = [] } } = this.props;
    const { properties = {} } = (selectedModel || {}).model || {};
    const { shape = "" } = selectedModel;
    /*
    const modelDescriptionValue = selectedModel.description || "";
    const descriptionValue =
      inputingDescription === "empty" ? "" : inputingDescription || modelDescriptionValue;
    */

    const condition =  conditionsequenceflow === "empty"
    ? ""
    : conditionsequenceflow ||
      properties.conditionsequenceflow;

    return shape ==='flow-polyline-round' ? ( 
      <div
        data-status="edge-selected"
        className={`pannel ${styles.tabContent}`}
        id="edge_detailpannel"
      >
        <div className={styles.headTitle}>连接线</div>

        {selectedModel.gatewaySource ? (
          <Tabs
            activeKey={activeKey}
            className={styles.smallTab}
            onChange={(key) => this.setState({ activeKey: key })}
            size="small"
          >
            <TabPane tab="属性" key="1">
              <div
                className={`block-container ${styles.content}`}
                style={selectedModel.gatewaySource ? {} : { marginTop: "16px" }}
              >
                {this.renderInput()}
                {/* 后端没有保存，先隐藏
                {selectedModel.gatewaySource && (
                  <div className={styles.content_item}>
                    <span className={styles.item_label}>描述信息：</span>
                    <Input.TextArea
                      rows={4}
                      placeholder="请输入描述信息"
                      disabled={disable}
                      maxLength={100}
                      value={descriptionValue}
                      onChange={(ev) =>
                        this.handleChage("description", ev.target.value)
                      }
                      onBlur={(ev) => {
                        this.handleGraphChange("description", ev.target.value);
                      }}
                    />
                  </div>
                )}
                */}
              </div>
            </TabPane>
            <TabPane tab="条件设置" key="2">
              <div
                className={`block-container ${styles.content}`}
                style={selectedModel.gatewaySource ? {} : { marginTop: "16px" }}
              >
                <div className={styles.content_item} style={{alignItems: 'center'}}>
                  <span className={styles.item_label}>条件表达式：</span>
                  <Input
                    disabled={disable}
                    placeholder={`${"$"}{days<=3}`}
                    value={condition}
                    onChange={(ev) =>
                      this.handleChage("conditionsequenceflow", ev.target.value)
                    }
                    onBlur={(ev) => {
                      this.handleChangeProperties(
                        "conditionsequenceflow",
                        ev.target.value,
                        selectedModel.model,
                        selectedModel.shape,
                      );
                    }}
                    style={{marginRight: 12 }}
                  />
                  <FlowVariablesSelectorPopover
                    variables={modelVariables}
                    onSelect={({ code }) => {
                      this.handleChangeProperties(
                        "conditionsequenceflow",
                        `${condition}\${${code}}`,
                        selectedModel.model,
                        selectedModel.shape,
                      );
                    }}
                  />

                </div>
              </div>
            </TabPane>
          </Tabs>
        ) : (
          <div
            className={`block-container ${styles.content}`}
            style={selectedModel.gatewaySource ? {} : { marginTop: "16px" }}
          >
            {this.renderInput()}
          </div>
        )}
      </div>
    ) : <></>;
  }
}
export default EdgeSelected;
